<template>
	<div class="system-user-dialog-container">
		<el-dialog title="修改密码" :show-close="false" v-model="state.dialog.isShowDialog" width="469px" style="border-radius: 10px">
			<el-form ref="userDialogFormRef" :model="state.userForm" size="default" label-width="90px">
				<el-row :gutter="35">
					<el-col>
						<el-form-item label="原密码">
							<el-input v-model="state.userForm.oldpass" placeholder="请输入原密码" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col>
						<el-form-item label="新密码">
							<el-input v-model="state.userForm.password" placeholder="请输入新密码" clearable></el-input>
						</el-form-item>
					</el-col>
          <el-col>
            <el-form-item label="新密码确认">
              <el-input v-model="state.userForm.rpassword" placeholder="请再次输入新密码" clearable></el-input>
            </el-form-item>
          </el-col>

				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="closeDialog" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemUserDialog">
import { reactive, ref } from 'vue';
import { useradd,changepas } from "@/api/api"
import {ElMessage} from "element-plus";
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const userDialogFormRef = ref();
const state = reactive({
	userForm: {
    oldpass : '',
    password : '',
    rpassword : '',
	},
	dialog: {
		isShowDialog: false,
	},
});

// 打开弹窗
const openDialog = () => {
	state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};
// 提交
const onSubmit = async () => {
	const  res= await changepas(state.userForm)
	closeDialog();
  ElMessage.success('密码修改成功！');
};


// 暴露变量
defineExpose({
	openDialog,
});
</script>
